/* 第一个区域的顶部导航栏样式 */



.newGoodClass_1 {
    width: 60%;
    margin: auto ;
}

.goodClasTop {
    height: 10%;
	margin: 20px 0;
}

.newGoodClass ul {
    display: flex;
}

.goodClasTop ul {
    justify-content: flex-start;
}

.goodClasTop ul li {
	
    width: 110px;
    text-align: center;
    position: relative;
}

.goodClasTop ul li.active::after {
    content: "";
    position: absolute;
    bottom: -5px; /* 调整距离文字的距离，这里设置为向下偏移5px，可按需调整 */
    left: 25%; /* 让小横杠变短，这里设置起始位置从左侧25%处开始，可根据需求改变占比 */
    width: 50%; /* 小横杠宽度设置为50%，可根据想要的长度效果调整该值 */
    height: 2px;
    background-color: #FF8C00; /* 设置为比较红的橙色，颜色代码可根据喜好微调 */
}

.goodClassButtom ul {
    justify-content: space-around;
    flex-wrap: wrap;
}

.goodClassButtom li {
	border-radius: 10px ;
	overflow: hidden;
	height: 250px;
    width: 21%;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
    margin: 10px 0;
}

.goodClassButtom img {
	height: 60%;
    width: 100%;
}

.goodClassButtom h1 {
	color: #000;
	margin: 10px 0;
    font-weight: 100;
    font-size: 18px;
}

.goodClassButtom h2 {
	color: #000;
	margin: -5px 0;
    font-weight: 100;
    font-size: 16px;
}

.goodClassButtom p {
	margin-top: 5px;
    color: red;
}

.tab-content {
    display: none;
}
.tab-links-1 li {
    width: 110px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.tab-links-1 li.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    background-color: #FF8C00;
}

/* 第二个区域的顶部导航栏样式 */
.tab-links-2 li {
    width: 110px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.tab-links-2 li.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 25%;
    width: 50%;
    height: 2px;
    background-color: #FF8C00;
}

/* 两个区域通用的课程展示区域样式 */
.goodClassButtom ul {
    justify-content: space-around;
    flex-wrap: wrap;
}

.goodClassButtom li {
    width: 21%;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
    margin: 10px 0;
}

.goodClassButtom img {
    width: 100%;
}

.goodClassButtom h1 {
    font-weight: 100;
    font-size: 18px;
}

.goodClassButtom h2 {
    font-weight: 100;
    font-size: 16px;
}

.goodClassButtom p {
    color: red;
}

.tab-content-1,
.tab-content-2 {
    display: none;
}